<template>
    <section class="page-content">
        <div class="toolbar">
            <el-button type="primary" icon="yuethink-add" size="small" @click="create">新增</el-button>
            <el-button type="success" icon="yuethink-edit" size="small" @click="edit">编辑</el-button>
            <el-button type="danger" icon="yuethink-delete" size="small" @click="destory">删除</el-button>
        </div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" v-loading="treeLoading">
            <el-tab-pane label="题库分类" name="post">
                <el-tree
                        ref="tree"
                        :data="treeData"
                        :props="props"
                        :indent="26"
                        @node-click="nodeClick"
                        default-expand-all
                        node-key="id"
                        :highlight-current="true"
                >
                </el-tree>
            </el-tab-pane>
        </el-tabs>
        <!-- dialig -->
        <el-dialog title="分类" :visible.sync="visible">
            <el-form :model="formData" ref="formData" :rules="formRules"  label-width="120px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="formData.name" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="parent_id">
                    <el-select v-model.number="formData.parent_id" placeholder="请选择父级分类" >
                        <el-option label="顶级分类" :value="0" ></el-option>
                        <el-option  v-for="item in parentCategories" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词" prop="keywords">
                    <el-input v-model="formData.keywords" placeholder="关键词"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="formData.description" placeholder="描述"></el-input>
                </el-form-item>
                <el-input v-model="formData.belongs_to" type="hidden"></el-input>
                <el-input v-model="formData.id" type="hidden"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false" :disabled="editLoading">取 消</el-button>
                <el-button type="primary" :loading="editLoading" @click="handleCreateOrEdit('formData')">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<style lang="scss" scoped>
    .el-select, .el-input, .el-textarea {
        width: 80%;
    }
</style>